<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		@keyframes glow {
			from {
				border-color: #393;
				box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 1px 0 #393;
			}

			to {
				border-color: #6f6;
				box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 1px 0 #6f6;
			}
		}

		.box {
			width: 100px;
			height: 100px;
			margin: 100px auto;
			background-color: yellow;
			animation: glow 800ms ease-out infinite alternate;
		}

		.box:hover {
			animation-play-state: paused;
		}

		.form {
			margin: 100px auto;
			text-align: center;
		}

		/* 2 */
		body {
			perspective: 1000px;
		}

		section {
			position: relative;
			width: 200px;
			height: 150px;
			margin: 100px auto;
			transform-style: preserve-3d;
			animation: rotate 3s linear infinite;
		 background: url(./images/lanhu01.jpg) no-repeat;
		}

		section:hover {
			/* 鼠标移入，停止动画 */
			animation-play-state: paused;
		}

		@keyframes rotate {
			from {
				transform: rotateY(0);
			}

			to {
				transform: rotateY(180deg);
			}
		}

		section div {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(./images/lanhu02.jpg) no-repeat;
		}

		section div:nth-child(1) {
			transform: rotateY(0) translateZ(200px);
		}

		section div:nth-child(2) {
			transform: rotateY(60deg) translateZ(200px);
		}

		section div:nth-child(3) {
			transform: rotateY(120deg) translateZ(200px);
		}

		section div:nth-child(4) {
			transform: rotateY(180deg) translateZ(200px);
		}

		section div:nth-child(5) {
			transform: rotateY(240deg) translateZ(200px);
		}

		section div:nth-child(6) {
			transform: rotateY(300deg) translateZ(200px);
		}
	</style>
	<body>
		<div class="box"></div>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>
